<template>
  <div class="set-oauth">
    <w-nav-bar
      title="第三方登录"/>
    <p class="message">该登录只能用于聊天室</p>
    <div class="icon-box w-flex-center">
      <q-q-icon class="icon" @click="qqClick" />
    </div>
  </div>
</template>

<script>
  import QQIcon from '@/icons/qq.svg'
  export default {
    name: 'SetLoginIndex',
    components: {
      QQIcon
    },
    data() {
      return {}
    },
    computed: {
    },
    methods: {
      qqClick() {
        const appId = process.env.VUE_APP_OAUTH_QQ_APP_ID
        const p = `response_type=token&client_id=${appId}&redirect_uri=${process.env.OAUTH_QQ_REDIRECT_URL}&scope=get_user_info`
        location.href = `${process.env.VUE_APP_QQ_OAUTH_URL}?${p}`
      },
    }
  }
</script>

<style lang="scss" scoped>
.set-oauth {
  .message {
    text-align: center;
    color: #999;
  }
  .icon-box {
    padding-top: 50px;
    .icon {
      width: 100px;
      height: 100px;
      fill: #4cc2d7;
    }
  }
}
</style>
